.header {
	display: flex;
	flex-direction: column;
}

.header .one {
	display: flex;
	width: 100%;
	/* 使.one填满header的全部宽度 */
}

.header .one>div {
	display: flex;

	/* 横向居中图片和文字 */
	align-items: center;
	/* 纵向居中图片和文字 */
}

.header .one .four,
.header .one .five .six {
	flex: 0.68;
	/* 给.left和.right设置弹性值1 */
}

.header .one {
	flex: 3;
	/* 给.center设置弹性值3 */
	flex-direction:
		/* 栈图片和文字垂直排列 */
}

.two {
	display: flex;
	align-items: center;
}

.three {
	font-size: 30px;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

label {
	white-space: nowrap;
	margin-right: 10px;
	font-size: 50px;
}

.item2 {
	margin-bottom: 30px;
}

.payment-password {
	max-width: 300px;
	margin: 0 auto;
	text-align: center;
}

input[type="password"] {
	padding: 10px;
	margin: 10px 0;
	width: 100%;
	box-sizing: border-box;
}



.button-color {
	color: white;
	width: 100%;
	height: 100px;
	margin-top: 40px;
	background-color: royalblue;
	font-size: 50px;
	border-radius: 30px;
}

.centered-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
	/* 让整个容器占据视口的高度 */
}

#password-input {
	text-align: center;
	letter-spacing: 42px;
	/* 根据输入框的宽度调整字符间距 */
	font-size: 32px;
	/* 为视觉效果调整字体大小 */
	width: 300px;
	/* 根据需要调整输入框的总宽度 */
	padding-left: 14px;
	/* 调整第一个数字的起始位置 */
	border: 1px solid #000;
	border-radius: 4px;
	/* 如果需要，可以设置圆角 */
}

#password-input::placeholder {
	letter-spacing: normal;
	/* 重置占位符的字符间距 */
}

/* 保持密码字符为圆点 */
#password-input {
	-webkit-text-security: disc;
}

@-moz-document url-prefix() {
	#password-input {
		font-family: text-security-disc, serif;
	}
}

p {
	font-size: 50px;
	color: blueviolet;
	text-align: center;
}

#backButton {
	padding: 10px 20px;
	background-color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
}

#backButton:hover {
	background-color: none;
}

#backButton:active {
	background-color: none;
}

.san {
	margin-left: 300px;
	background-color: white;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
	
}

/* 弹窗的基本样式 */
.modal {
	display: none;
	/* 默认隐藏 */
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	/* 遮罩背景 */
	z-index: 9999;
	/* 确保在顶层 */
}

/* 弹窗内容的样式 */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 450px;
	/* 设置最大宽度 */
}

/* 关闭按钮的样式 */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

#password-container {
	display: flex;
	justify-content: space-between;
	/* Adjust spacing as needed */
	border: 0px solid black;
	border-radius: 5px;
}

.password-box {
	width: 200px;
	height: 100px;
	margin: 4px;
	border: 0px solid black background-color: #FFFFFF;
	text-align: center;
	font-size: 24px;
	vertical-align: middle;
}

.password-box:focus {
	outline: none;
	border-bottom: 2px solid blue;
	/* Blue line for the focused input box */
	animation: blink-caret .75s step-end infinite;
}

/* Create the blinking effect */
@keyframes blink-caret {

	from,
	to {
		border-color: transparent
	}

	50% {
		border-color: blue;
	}
}
.popup-container {
  display: none; /* 开始时隐藏 */
  position: fixed;
  left: 0;
  bottom: -100%; /* 将弹窗初始位置设为完全隐藏在屏幕之下 */
  width: 100%;
  z-index: 0; /* 确保它在其他内容之上 */
  transition: bottom 0.5s ease-out; /* 平滑的过渡效果 */
 border: 1px solid black;
 border-radius: 5px;
 padding: 0px;
}

.popup-content {
  background: white;
  padding: 20px;
  width: 100%;
  max-width: 600px; 
  margin: auto;
  position: relative; /* 使得.close-button可以相对于它进行定位 */
}

.close-button {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  line-height: 24px;
  font-weight: bold;
  bottom:100%;
}

/* 为 .ku 的直接子 div 设置样式 */
.ku div {
  /* 按需添加的其他样式，比如padding、字体大小等 */
  padding: 10px;
  font-size: 36px;
  position: relative; /* 为了伪元素定位 */
  text-align: center;
}

/* 为 .ku 中除了最后一个子元素以外的每个 div 添加分割线 */
.ku div:not(:last-child):after {
  content: ''; /* 伪元素必须要有内容，即便是空的 */
  display: block; /* 让伪元素表现得像一个块级元素 */
  height: 1px; /* 分割线的厚度 */
  background-color: #ccc; /* 分割线的颜色 */
  position: absolute; /* 使用绝对定位放置分割线 */
  left: 0; /* 分割线的起始位置 */
  right: 0; /* 分割线的结束位置 */
  bottom: 0; /* 分割线的位置，与子div底部对齐 */
}
